<template>
  <div class="topbar" :style="{ backgroundColor: bcColor, color: fontColor }">
    <el-row :gutter="20">
      <el-col :xs="8" :sm="4" :md="4" :lg="4" :xl="5">
        <div class="left">
          <slot name="left">
            <el-avatar :src="avatar" @click="handelAvatr"></el-avatar>
            <span
              class="nickname"
              style="fontsize: 13px"
              v-if="currentProfile"
              >{{ currentProfile.nickname }}</span
            >
            <el-button
              type="text"
              @click="handleLogin"
              :style="{ color: fontColor }"
              style="margin-left: 5px"
              v-else
              >登录</el-button
            >
            <el-button
              type="text"
              @click="loginOut"
              v-if="currentProfile !== null"
              size="mini"
              :style="{ color: fontColor }"
              style="margin-top: 10px; margin-left: 15px"
              >退出</el-button
            >
          </slot>
        </div></el-col
      >
      <el-col :xs="8" :sm="11" :md="11" :lg="12" :xl="13"
        ><div class="center">
          <slot name="center">
            <div>
              <a href="javascript:void(0)" @click.stop="togBack">
                <el-icon :size="14" :color="fontColor">
                  <ArrowLeft></ArrowLeft>
                </el-icon>
              </a>
            </div>
            <div>
              <a href="javascript:void(0)">
                <el-icon :size="14" :color="fontColor">
                  <Refresh></Refresh>
                </el-icon>
              </a>
            </div>
            <div class="inputSq">
              <el-input
                size="mini"
                class="inputt"
                placeholder="请输入内容"
                v-model="searchInput"
                clearable
                suffix-icon="el-icon-search"
                @keyup.enter="togSearch"
              ></el-input>
            </div>
            <div>
              <!-- <a href>
                <el-icon :size="14" :color="fontColor">
                  <Microphone></Microphone>
                </el-icon>
              </a> -->
            </div>
          </slot>
        </div></el-col
      >
      <el-col :xs="8" :sm="9" :md="9" :lg="8" :xl="6"
        ><div class="right">
          <slot name="right">
            <!-- <a href :style="{ color: fontColor }">回到旧版</a>
            <a href>
              <el-icon :size="16" :color="fontColor">
                <Monitor></Monitor>
              </el-icon>
            </a>
            <a href>
              <el-icon :size="16" :color="fontColor">
                <Phone></Phone>
              </el-icon>
            </a>
            <a href>
              <el-icon :size="16" :color="fontColor">
                <Menu></Menu>
              </el-icon>
            </a> -->
            <a @click.stop="handelTheme(null)">
              <el-icon
                :style="{
                  fontSize: '20px',
                  marginRight: '3px',
                  cursor: 'pointer'
                }"
                :color="fontColor"
              >
                <Opportunity></Opportunity>
              </el-icon>
            </a>
            <!-- <a href>
              <el-icon :size="14" :color="fontColor">
                <Setting></Setting>
              </el-icon>
            </a> -->
            <a @click.stop="handelLetter(null)">
              <el-icon
                :color="fontColor"
                :style="{
                  fontSize: '20px',
                  marginRight: '3px',
                  cursor: 'pointer'
                }"
                ><message
              /></el-icon>
            </a>
            <!-- <a href>
              <el-icon :size="14" :color="fontColor">
                <Close></Close>
              </el-icon>
            </a> -->
          </slot>
        </div></el-col
      >
    </el-row>
    <login-modal
      :modalConfig="modalConfig"
      ref="loginModalRef"
      @handleLogin="loginSure"
    ></login-modal>
    <theme-cpn v-show="themeShow" @handelClose="handelTheme"></theme-cpn>
    <drawer-cpn v-show="drawer" @handelClose="handelLetter"></drawer-cpn>
  </div>
</template>

<script lang="ts">
import { defineComponent, ref, computed, onBeforeUnmount, onMounted } from 'vue'
import { useStore } from 'vuex'
import { useRouter } from 'vue-router'
import { modalConfig } from '../config/modal.config'
import LoginModal from '../cpns/login-modal.vue'
import ThemeCpn from '../cpns/theme.vue'
import DrawerCpn from '../cpns/drawer.vue'
import LocalCache from '@/utils/cache'
import { phoneLogout, loginStatus } from '@/service/login'
import { Message } from '@/utils/message'
import emitter from '@/utils/events'

export default defineComponent({
  components: { LoginModal, ThemeCpn, DrawerCpn },
  setup() {
    const store = useStore()
    const router = useRouter()
    const bcColor = computed(() => store.state.theme.bcColor)
    const fontColor = computed(() => store.state.theme.fontColor)
    // 头像
    const avatar = computed(() => {
      const defaultUrl =
        'https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png'
      const profile = store.state.login.profile
      if (profile) {
        return profile.avatarUrl
      } else {
        return defaultUrl
      }
    })
    const handelAvatr = () => {
      const profile = store.state.login.profile
      if (profile) {
        router.push('/main/user' + store.getters['login/getUserId'])
      }
    }

    //登录逻辑
    // let userImg = ref(require('assets/img/login/user.png'))
    const currentProfile = computed(() => {
      const profile = store.state.login.profile
      return profile
    })
    const loginOut = () => {
      phoneLogout().then((res: any) => {
        if (res.code == 200) {
          Message('已退出登录', 'success')
        }
        store.dispatch('login/loginOut')
        router.push('/main')
      })
    }
    // 登录弹窗逻辑
    const loginModalRef = ref<InstanceType<typeof LoginModal>>()
    const handleLogin = () => {
      loginModalRef.value!.dialogVisible = true
    }
    const loginSure = (isMember: boolean) => {
      const data = loginModalRef.value?.formData
      if (isMember) {
        savePassword(data)
      } else {
        deletePwsd()
      }
      store.dispatch('login/phoneLoginAction', data)
    }
    // 本地保存密码
    const savePassword = (obj: any) => {
      LocalCache.setCache('cellphone', obj.cellphone)
      LocalCache.setCache('password', obj.password)
    }
    // 清除本地保存
    const deletePwsd = () => {
      LocalCache.deleteCache('cellphone')
      LocalCache.deleteCache('password')
    }

    //搜索逻辑
    let searchInput = ref('')
    const togSearch = () => {
      if (searchInput.value) {
        router.push('/main/serachmusic' + searchInput.value)
      }
    }
    const togBack = () => {
      router.back()
    }

    // 主题逻辑
    // 私信流程
    const themeShow = ref(false)
    const drawer = ref(false)
    const handelTheme = (flag?: boolean | null) => {
      if (flag || flag === false) {
        themeShow.value = flag
        return
      }
      themeShow.value = !themeShow.value
      drawer.value = false
    }
    const handelLetter = (flag?: boolean | null) => {
      // 用户未登录
      if (!currentProfile.value) {
        handleLogin()
        return
      }
      if (flag || flag === false) {
        drawer.value = flag
        return
      }
      drawer.value = !drawer.value
      themeShow.value = false
    }
    const handelClose = (params: any) => {
      drawer.value = params
      themeShow.value = params
    }
    onMounted(() => {
      emitter.on('handelClose', handelClose)
    })
    onBeforeUnmount(() => {
      emitter.off('handelClose', handelClose)
    })

    return {
      currentProfile,
      loginOut,
      searchInput,
      togSearch,
      togBack,
      handleLogin,
      modalConfig,
      loginModalRef,
      loginSure,
      avatar,
      bcColor,
      fontColor,
      handelTheme,
      themeShow,
      handelAvatr,
      drawer,
      handelLetter
    }
  }
})
</script>

<style>
.nickname {
  display: inline-block;
  width: 80px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 12px;
}
</style>
